<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品调价</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css">
		<style type="text/css">
		    /*<!--设置单元格行高-->*/
		    .layui-table-cell {
		        height: auto;
		        line-height: 20px;
		    }
			::-webkit-scrollbar {
			  width: 0px;
			  height: 1px;
			}
		</style>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-border-cyan"style="width: 25%;float: left;margin-right: 10px;height: 390px">
		  <legend style="font-size: 15px;">商品类别</legend>
		  <div class="layui-field-box" style="overflow: hidden;">
			  <span>类别名称：</span><input type="input" id="searchProListTree" style="width: 140px;height: 25px">
			<!-- 树形控件 -->
			  <div id="proListTree" style="height:275px; width:260px;overflow-x: hidden;">
			  </div>
		  </div>
		</fieldset>
		<!-- 商品表格 -->
		<fieldset class="layui-elem-field layui-border-cyan" style="width: 73%;float: left;height: 390px;">
		  <legend style="font-size: 15px;">商品列表</legend>
		  <div class="layui-field-box" style="width: 950px;">
			<div class="layui-form-item" style="margin-bottom: 0px;text-align: center;">
			    <div class="layui-inline" >
			      <label class="layui-form-label" style="width: 150px;">输入商品信息查询：</label>
			      <div class="layui-input-inline">
			        <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
			      </div>
				  <button type="button" class="layui-btn" id="">查询</button>
				  <button type="button" class="layui-btn" id="adjustPrice">调价</button>
				  <button type="button" class="layui-btn" id="searchAdjustPrice">调价查询</button>
			    </div>
			  </div>
			<table id="commodityDetails"  lay-filter="commodityDetails"></table>
		  </div>
		</fieldset>
		<fieldset class="layui-elem-field layui-border-cyan" style="width: 99%;float: left;height: 260px">
		  <legend style="font-size: 15px;">商品列表</legend>
		  <div class="layui-field-box">
				<table id="marketList"  lay-filter="test"></table>
		  </div>
		</fieldset>
		<div id="from"  style="display: none;padding: 10px;">
			<fieldset class="layui-elem-field layui-border-cyan" style="width: 100%;">
			  <legend style="font-size: 15px;">商品列表</legend>
			  <div class="layui-field-box">
					<form class="layui-form" action="../../../updateCommodityPriecInfo" method="post" lay-filter="layui-detail">
						<div class="layui-form-item" style="text-align: center;font-size: 20px;">
							<div class="layui-inline">
								<span style="color: red;">最后一次进价为：</span><span id="finallyPurchasingPrice" style="width: 100px;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
							    <label class="layui-form-label">商品编号：</label>
							    <div class="layui-input-inline">
							        <input type="text" name="proId" readonly="" class="layui-input">
							    </div>
							</div>
							<div class="layui-inline">
							    <label class="layui-form-label">商品名称：</label>
							    <div class="layui-input-inline">
							        <input type="text" name="proName" readonly="" class="layui-input">
							    </div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
							    <label class="layui-form-label">预设进价：</label>
							    <div class="layui-input-inline">
							        <input type="text" name="proBid" class="layui-input">
							    </div>
							</div>
							<div class="layui-inline">
							    <label class="layui-form-label">预设售价：</label>
							    <div class="layui-input-inline">
							        <input type="text" name="proSalePrice" class="layui-input">
							    </div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
							    <label class="layui-form-label">商品折扣：</label>
							    <div class="layui-input-inline">
							        <input type="text" value="1" class="layui-input">
							    </div>
							</div>
							<div class="layui-inline">
							    <label class="layui-form-label" style="color: red;width: 200px;">0.9为9折，1折为不打折</label>
							</div>
						</div>
						<div class="layui-form-item"  style="height: 20px;margin-top: -25px;">
							<div class="layui-inline">
							    <label class="layui-form-label">&nbsp;</label>
							    <div class="layui-input-inline">
							         <input type="checkbox" name="" lay-skin="primary" title="启用商品特价">
							    </div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">&nbsp;</label>
								<div class="layui-input-inline">
								     <input type="checkbox" name="" lay-skin="primary" title="启用会员特价">
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
							    <label class="layui-form-label">商品特价：</label>
							    <div class="layui-input-inline">
							        <input type="text" class="layui-input">
							    </div>
							</div>
							<div class="layui-inline">
							    <label class="layui-form-label">会员特价：</label>
							    <div class="layui-input-inline">
							        <input type="text"class="layui-input">
							    </div>
							</div>
						</div>
						<div class="layui-form-item" style="height: 20px;margin-top: -25px;">
							<div class="layui-inline">
							    <label class="layui-form-label">&nbsp;</label>
							    <div class="layui-input-inline">
							    </div>
							</div>
							<div class="layui-inline">
							    <label class="layui-form-label">&nbsp;</label>
							    <div class="layui-input-inline">
							        <input type="checkbox" name="" lay-skin="primary" title="该商品有特价期限">
							    </div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
							    <label class="layui-form-label">商品特价：</label>
							    <div class="layui-input-inline">
							        <input type="text"class="layui-input">
							    </div>
							</div>
							<div class="layui-inline">
							    <label class="layui-form-label">会员特价：</label>
							    <div class="layui-input-inline">
							        <input type="text"class="layui-input">
							    </div>
							</div>
						</div>
						<div style="text-align: center;">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</form>
			  </div>
			</fieldset>
		</div>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table',"tree",'jquery', 'layer'], function(){
				var tree = layui.tree
				    ,layer = layui.layer
		 			,table = layui.table
					,$ = layui.jquery
					,form = layui.form;
				var flag = false;
				form.on('submit(demo1)', function(data){  
					console.log(data.field)
					/* 关闭当前弹出层 */
					parent.layer.close(parent.layer.getFrameIndex(window.name));//先得到当前iframe层的索引
					parent.location.reload();
				})
				$("#adjustPrice").click(function(){
					if (flag == true){
						console.log(flag)
						layer.open({
							type: 1,
							title: '调价管理',
							scrollbar: false,
							area: ['750px', '95%'],
							content: $("#from")
						});
					}else if(flag == false){
						console.log(flag)
						layer.msg("请先选择商品")
					}
					
				})
				
                //商品列表分类树形控件
                $.ajax({ 
                    dataType: 'json',
                    url: "../../../searchProdutType",
                    success: function(msg) {
						msg.data[0].spread = true;
                        tree.render({
                            elem: '#proListTree', //绑定元素
                            data: msg.data,
                            click: function(obj) { //根据输入商品信息 动态查询商品
                                if (obj.data.children == null) {
                                    var proTypeId = obj.data.id;
									console.log(proTypeId)
									table.reload('commodityDetails', {
                                        url: '../../../searchCommodityDetaInfoils?proTypeId=' +proTypeId
                                    })
                                }
                            }
                        })
                    }
                });
				/* 商品明细表 */
				table.render({
				    elem: '#commodityDetails'
				    ,height: 295
				    ,url: '../../../searchCommodityDetaInfoils' //数据接口
				    ,page: true //开启分页
				    ,cols: [[ //表头
						{field: 'proId', title: '商品编号', width:100, sort: true, fixed: 'left'}
						,{field: 'proName', title: '商品名称', width:120}
						,{field: 'proAlias', title: '单位', width:80,templet:function(obj){
							return obj.productUnit.unitName
						}}
						,{field: 'proBid', title: '预设进价', width:80} 
						,{field: 'proSalePrice', title: '预设售价', width: 100}
						,{field: 'experience', title: '产品规格', width: 80, sort: true}
						,{field: 'proStockLower', title: '最低库存', width: 80, sort: true}
						,{field: 'classify', title: '会员特价', width: 80}
						,{field: 'wealth', title: '会员价', width: 135, sort: true}
						,{field: 'wealth', title: '特价期限', width: 135, sort: true}
						,{field: 'wealth', title: '开始日期', width: 135, sort: true}
						,{field: 'wealth', title: '结束日期', width: 135, sort: true}
						,{field: 'wealth', title: '暂停使用', width: 135, sort: true}
						,{field: 'wealth', title: '打折率', width: 135, sort: true}
						,{field: 'manufacturerId', title: '生厂厂商', width: 135, sort: true}
						,{field: 'wealth', title: '备注', width: 135, sort: true}
					]]
				  });
				  
				  //单击行事件
				  table.on('row(commodityDetails)', function(obj){
					flag = true;
				  	obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green');
				  	// console.log(obj.data)
					form.val('layui-detail',JSON.parse(JSON.stringify(obj.data)));      //渲染表单
					//
				  	table.reload('marketList', {
				  	    url:"../../../searchCommodityClassDescInfo?proId="+obj.data.proId
				  	}); 
				  }); 
				  /* 销售商品明细表 */
				  table.render({
				      elem: '#marketList '
				      ,height: 212
				      ,url: '../../api/aaa.json' //数据接口
				      ,page: true //开启分页
				      ,cols: [[ //表头
				        {field: 'menTypeName', title: '顾客分类', width:100, fixed: 'left'}
				        ,{field: '', title: '商品名称', width:100,templet:function(obj){
							return obj.productInfo.proName
						}}
				        ,{field: '', title: '零售单价', width:100,templet:function(obj){
							return obj.productInfo.proSalePrice
						}}
				        ,{field: 'city', title: '商品折扣', width:100,templet:function(obj){
							return 1;
						}} 
				        ,{field: 'menTypeDiscount', title: '顾客折扣', width: 100}
				        ,{field: 'menTypeDiscount', title: '最终折扣', width: 100, sort: true}
				        ,{field: 'classify', title: '商品特价', width: 100,templet:function(obj){
							return "不启用"
						}}
				        ,{field: 'wealth', title: '会员特价', width: 135,templet:function(obj){
							return "启用"
						}}
				  	  ,{field: 'wealth', title: '顾客特价', width: 135,templet:function(obj){return 0}}
				  	  ,{field: 'wealth', title: '最终单价', width: 135,templet:function(obj){
						  return obj.productInfo.proSalePrice * obj.menTypeDiscount
					  }}				  	
				  	]]
				    });
            })
		</script>
	</body>
</html>
